<template>
  <div class="hongkong-hospital">
    <nav-top title="香港医院" :goback="true"></nav-top>
    <header>
      <van-field
        class="search"
        v-model="filed"
        clearable
        right-icon="search"
        placeholder="搜索医院"
        @click-right-icon="$toast('question')"
        v-show="false"
      />
    </header>
    <div class="result-list">
      <div v-for="(val, key) in hospitals" :key="key" class="result-item">
        <a :href="'/hongkong/hospital/specialty?fid='+val.id">
          <img class="hospital-img" :src="domain + val.img_url" />
          <div class="hospital-name" v-html="val.y_name" />
          <img class="goto-img" src="/static/icon/goto.png" />
        </a>
      </div>
    </div>
    <contact-footer v-show="false"></contact-footer>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import ContactFooter from "@/components/footer/contactFooter";
import { domain } from '@/api'
import axios from 'axios'

export default {
  name: "HongkongHospital",
  components: {
    NavTop,
    ContactFooter
  },
  data() {
    return {
      filed: "",
      domain: 'http://www.likehealth.com.cn',
      hospitals: [
        {
          id:'',
          img_url: "/static/img/hospital/hospital.png",
          y_name: "医院名字医院名字医院名字医院名字医院名字"
        },
      ]
    };
  },
  methods: {
    selectType(key) {
      this.active = key;
    }
  },
  created:function(){
    axios.post(domain+"/api/old/keshi/list")
    .then((res)=>{
      if(res.data.code==1){
        this.hospitals = res.data.data
      }
    })
    .catch((err)=>{

    })
  }
};
</script>

<style lang='scss' scoped>
.hongkong-hospital {
  margin-top: 60px;
  .search {
    margin-top: 50px;
    height: 30px;
    padding: 0 23px;
    border-bottom: 1px solid #e6e6e6;
    input {
      line-height: 33px;

      :-ms-input-placeholder {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(194, 194, 194, 1);
      }
    }
  }
  .search::after {
    border: none;
  }
  .result-list {
    .result-item {
      position: relative;
      min-height: 50px;
      border-bottom: 1px solid #f8f8f8;
      .hospital-img {
        width: 31px;
        height: 31px;
        margin-top: 9px;
        margin-left: 8px;
        margin-right: 9px;
        border-radius: 50%;
        float: left;
      }
      .hospital-name {
        width: 253px;
        font-size: 13px;
        font-family: Microsoft YaHei;
        color: #000;
        line-height: 1.2em;
        padding-top: 12px;
        margin-left: 48px;
      }
      .goto-img {
        position: absolute;
        right: 10px;
        top: 19px;
        width: 8px;
        height: 13px;
      }
    }
  }
}
</style>